<template>
  <AppLayout class="page-wrap">
    <uni-swipe-action class="address-list">
      <uni-swipe-action-item v-for="(address,index) in addressList" :key="index" :right-options="options" @click="handleRemove($event, index)">
        <view class="address-item">
          <view class="area">
            <text class="default" v-if="address.isDefault">默认</text>{{address.area}}
          </view>
          <view class="address">{{address.address}}</view>
          <view class="user-info">{{address.name}} {{address.mobile}}</view>
          <navigator class="button-edit" url="/pages/user/address/edit">编辑</navigator>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <view class="footer">
      <navigator class="button-new" url="/pages/user/address/create">
        <we-icon type="icon-add" size="big" top="3rpx" theme="white"/>
        <text>新建收获地址</text>
      </navigator>
    </view>
  </AppLayout>
</template>

<script>
  import AppLayout from '@/layouts/AppLayout'
  export default {
    name: 'AddressList',
    components: { AppLayout },
    data() {
      return {
        addressList: [
          {
            name: '张三',
            mobile: '130****0000',
            isDefault: true,
            area: '广东省深圳市宝安区',
            address: '西乡街道XXX号'
          },
          {
            name: '张三',
            mobile: '130****0000',
            isDefault: false,
            area: '广东省深圳市宝安区',
            address: '西乡街道XXX号'
          },
          {
            name: '张三',
            mobile: '130****0000',
            isDefault: false,
            area: '广东省深圳市宝安区',
            address: '西乡街道XXX号'
          },
          {
            name: '张三',
            mobile: '130****0000',
            isDefault: false,
            area: '广东省深圳市宝安区',
            address: '西乡街道XXX号'
          },
          {
            name: '张三',
            mobile: '130****0000',
            isDefault: false,
            area: '广东省深圳市宝安区',
            address: '西乡街道XXX号'
          },
          {
            name: '张三',
            mobile: '130****0000',
            isDefault: false,
            area: '广东省深圳市宝安区',
            address: '西乡街道XXX号'
          },
          {
            name: '张三',
            mobile: '130****0000',
            isDefault: false,
            area: '广东省深圳市宝安区',
            address: '西乡街道XXX号'
          },
          {
            name: '张三',
            mobile: '130****0000',
            isDefault: false,
            area: '广东省深圳市宝安区',
            address: '西乡街道XXX号'
          }
        ],
        options: [
          {
            text: '删除',
            style: {
              backgroundColor: '#dd524d'
            }
          }
        ]
      }
    },
    methods: {
      // 删除地址
      handleRemove(e, index) {
        this.addressList.splice(index, 1)
      }
    }
  }
</script>

<style lang="scss">
  @import "../../../style/variables";
  // 新建地址按钮高度
  $button-create-height: 80rpx;
  $footer-height: $button-create-height + $gap-mini * 2;

  .page-wrap {
    // 地址列表
    .address-list {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      bottom: $footer-height;
      overflow-y: auto;
      // 地址
      .address-item {
        background-color: $background-color-module;
        padding: $gap-middle;
        border-bottom: 1px solid #eee;
        position: relative;
        // 地区信息
        .area {
          color: #777;
          font-size: $font-size-mini;
          // 默认地址标记
          .default {
            display: inline-block;
            border: 1px solid $primary-color;
            margin-right: $gap-mini;
            font-style: normal;
            padding: 0 $gap-mini;
            color: $primary-color;
          }
        }
        // 详细地址
        .address {
          font-size: 16px;
          padding: 10rpx 0;
          font-weight: bold;
        }
        // 用户信息
        .user-info {
          color: #777;
          font-size: $font-size-mini;
        }
        // 编辑按钮
        .button-edit {
          position: absolute;
          top: 30rpx;
          right: 30rpx;
          font-size: 14px;
          color: $primary-color;
        }
      }
    }
    // 底部操作
    .footer {
      width: 100%;
      height: $footer-height;
      position: absolute;
      left: 0;
      bottom: 0;
      padding: $gap-mini $gap-big;
      box-sizing: border-box;
      background-color: $background-color-module;
      // 新建收获地址按钮
      .button-new {
        width: 100%;
        height: $button-create-height;
        line-height: $button-create-height;
        flex-shrink: 0;
        background-color: $primary-color;
        color: #fff;
        border-radius: $button-create-height/2;
        text-align: center;
        font-weight: bold;
        text {
          position: relative;
          top: -1px;
        }
      }
    }
  }
</style>
